<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>building.html</title>

    <!-- 引入资源 -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <script src="/plugins/elementui/index.js"></script>
    <!--导入axios二次封装的工具-->
    <script src="/js/request.js"></script>

</head>
<body>

<div id="app">

    <el-row>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="adddialogVisible = true">添加</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="batchDelBuild">批量删除</el-button>
        <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                clear v-model="id"
                style="width:240px">
        </el-input>
        <el-button type="success" icon="el-icon-search" @click="searchBuild">搜索</el-button>
    </el-row>

    <el-table
            :data="buildings"
            border
            style="width: 95%;margin-top: 10px"
            @selection-change="handleSelectionChange"
    >
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>

        <el-table-column
                prop="numbers"
                label="楼栋"
                width="180">
        </el-table-column>

        <el-table-column
                prop="units"
                label="单元">
        </el-table-column>

        <el-table-column
                prop="remarks"
                label="备注">
        </el-table-column>

        <!-- template 自定义模板 -->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="medium"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                        size="medium"
                        icon="el-icon-delete"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!--
        1、sql的分页  (数据库分页)
           limit 关键字    currentPage\pageSize

        2、service 层业务的处理  (条件判断)
             计算分页开始位置 和 结束位置  （currentPage - 1） * pageSize
             我们项目中使用了分页插件
                 分页插件原理
                      mybatis 的插件开发
                      插件开发有拦截器    拦截器 进行 limit的sql的重构

        3、前端分页      (数据展示、页码选择)
             前端分页插件的使用

        el-pagination  分页组件
           @size-change         pageSize发生变化触发的函数 handleSizeChange
           @current-change      currentPage发生变化触发的函数 handleCurrentChange

       4、我使用分页插件的时候遇到的问题
           bug  描述清楚

    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 4]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="修改楼栋的回显"
            :visible.sync="updatedialogVisible"
             width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="build" label-width="80px">
            <el-form-item label="楼栋名称">
                <el-input v-model="build.numbers"></el-input>
            </el-form-item>
            <el-form-item label="单元">
                <el-input v-model="build.units"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="build.remarks"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="sendUpdateData">修改</el-button>
                <el-button @click="updatedialogVisible = false">取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>

    <el-dialog
            title="添加楼栋"
            :visible.sync="adddialogVisible"
            width="45%"
            :before-close="handleClose">
        <el-form ref="form" :model="addBuild" label-width="80px">
            <el-form-item label="楼栋名称">
                <el-input v-model="addBuild.numbers"></el-input>
            </el-form-item>
            <el-form-item label="单元">
                <el-input v-model="addBuild.units"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="addBuild.remarks"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addUpdateData">添加楼栋</el-button>
                <el-button @click="adddialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            currentPage:1,  //当前页面
            pageSize:2,    // 每页大小
            total:0,       // 总数
            buildings:[],
            updatedialogVisible:false,  //是否显示 false  不显示
            adddialogVisible:false,  //是否显示 false  不显示
            build:{},
            addBuild:{},   //添加楼栋的对象
            multipleSelection:[],//多选的数组
            id:""   //搜索的条件id
        },
        created(){   //页面初始化的时候 发送网络请求 获取数据
            this.initData(this.currentPage,this.pageSize,this.id);
        },
        methods:{
            //搜索
            searchBuild(){
                //条件查询的时候 查询的currentPage、pageSize 需要初始化
                this.currentPage = 1;
                this.pageSize = 2;
                this.initData(this.currentPage,this.pageSize,this.id);
            },
            //批量删除的方法
            batchDelBuild(){

                if(this.multipleSelection.length > 0){
                    //删除
                   let ids = this.multipleSelection.map(item=>item.id);
                    //进行发送数据 删除
                    request({
                        method:"delete",
                        url:"/building",
                        data:ids
                    }).then(resp=>{
                        //删除成功提示
                        //刷新
                        this.$message({
                            type: 'success',
                            message:resp.data.message
                        });
                        this.initData(this.currentPage,this.pageSize,this.id);
                    })
                }else{
                    this.$message({
                        type: 'info',
                        message: '未选中数据...'
                    });
                }

            },

            //多选择的触发函数
            handleSelectionChange(val){
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },

            //添加 楼栋的方法
            addUpdateData(){
                request({
                    method:"post",
                    url:"/building",
                    data:this.addBuild
                }).then(resp=>{
                    // 提示
                    // 关闭dialog
                    this.$message({
                        type: 'success',
                        message:resp.data.message
                    });
                    this.adddialogVisible = false;

                    // 把 修改的对象 清空
                    this.addBuild = {};
                    // 页面刷新
                    this.initData(this.currentPage,this.pageSize,this.id);
                });
            },
            //修改操作
            sendUpdateData(){
                request({
                    method:"put",
                    url:"/building",
                    data:this.build
                }).then(resp=>{
                    // 提示
                    // 关闭dialog
                    this.$message({
                        type: 'success',
                        message:resp.data.message
                    });
                    this.updatedialogVisible = false;

                    // 把 修改的对象 清空
                    this.build = {};
                    // 页面刷新
                    this.initData(this.currentPage,this.pageSize,this.id);
                });
            },
            // dialog 关闭执行的函数  点击× 的时候 关闭窗口
            handleClose(done){
                done();
            },
            handleEdit(obj){
                console.log(obj.id);
                //回显的dialog 进行展示
                this.updatedialogVisible = true;
                //赋值
                // this.build = obj;    浅克隆   地址不发生变化

                //修改对话框的时候、页面 不会发生变化
                this.build = JSON.parse(JSON.stringify(obj));   //深 克隆    地址发生了变化
            },
            handleDelete(obj){
                let id = obj.id;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //这里需要添加逻辑判断
                    //删除 最后一页的数据的最后一条的时候 、需要 把 currentPage - 1
                    let lastPage = Math.ceil(this.total / this.pageSize);
                    if (lastPage === this.currentPage){ //最后一页
                       if (this.total % this.pageSize === 1){ //最后一条数据
                           this.currentPage = this.currentPage - 1;
                       }
                    }
                    //发送数据
                    request({
                        method:"delete",
                        url:`/building/${id}`
                    }).then(resp=>{
                        //成功操作
                        console.log(resp);
                        //信息提示
                        this.$message({
                            type: 'success',
                            message:resp.data.message
                        });
                        //页面刷新
                        this.initData(this.currentPage,this.pageSize,this.id);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleCurrentChange(val){
                //拿到页面变化的数据
                this.currentPage = val
                this.initData(this.currentPage,this.pageSize,this.id);
            },
            //页数 发生变化触发的函数
            handleSizeChange(val){
                this.pageSize = val
                this.initData(this.currentPage,this.pageSize,this.id);
            },

            initData(currentPage,pageSize,id){
                request({
                    method:"post",
                    url:`/building/list/${currentPage}/${pageSize}`,
                    data:{id:id}
                }).then(resp=>{
                    // 拿到分页对象  resp.data.data
                    // 分页对象 后面的data total 是封装的数据
                    this.buildings = resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            }
        }
    })
</script>

</body>
</html>